<template>
     <div class="setwarp">
      <div class="set">
         <div class="setitem">
             <div @click="showclears">清除缓存数据  <p>(数据清除后将无法恢复)</p></div>
             <div :class="[isclear?'isclear':'']">
                 <div v-if="!issuccess" class="setcancel" @click="closeclears">取消</div>
                 <div v-if="!issuccess" class="setclear" @click="okclear">清除</div> 
                 <div v-if="issuccess" class="success">操作成功✔</div> 
             </div>
           
         </div>
      </div>
     </div>
  </template>
  
  <script>
    export default {
      name: 'pages',
      data(){
        return {
          isclear:false,
          issuccess:false
        }
      },
   
      mounted(){
        let _this = this;
        window.ipcRenderer.on('clearallres',(e,res)=>{
              // 移除之后 
              _this.issuccess=true; 
              setTimeout(() => {
                _this.closeclears() 
              },500);

        });
      },
      methods:{
        showclears(){
            this.isclear=true;
            this.issuccess = false;
        },
        closeclears(){
            this.isclear=false;
        },
        okclear(){
           window.ipcRenderer.send('clearall',null);
        }
      }
    }
  </script>
  
  <style lang="less">
   @sysfont:'myFontName';
    /* CSS */ 
    .setwarp{
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
    .set{
       display: flex;
       flex-direction: column;
       width: 100%;
       border-radius: 5px;
       background-color: #fff;
       padding: 5px 10px;
       box-sizing: border-box;
       font-family: @sysfont;
       font-size: .8rem;
       -webkit-app-region: no-drag;
       cursor: pointer;
       .setitem{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: .7rem;
          &:hover{
             color: black;
          }
          &>div:nth-of-type(1){
             display: flex;
             align-items: center;
             p{
               color: #ccc;
               margin-left: 1rem;
             }
          }
         &>div:nth-of-type(2){
           display: flex;
           align-items: center;
           transform: translateX(30px);
           opacity: 0;
           transition: all .2s ease 0s;
           &.isclear{
            transform: translateX(0);
            opacity: 1;
           }
           .setclear{
            font-size: .7rem;
            background-color: rgb(249, 187, 187);
            color: rgb(254, 80, 80);
            border-radius: 3px;
            padding: 3px 5px;
            margin-left: .3rem;
          }
          .setcancel{
            font-size: .7rem;
            background-color: rgb(163, 195, 213);
            color: rgb(67, 123, 162);
            border-radius: 3px;
            padding: 3px 5px;
          }
          .success{
            font-size: .7rem; 
            padding: 3px 5px;
            color: rgb(34, 167, 103);
          }
         } 
       
       }
    }
  </style>
  